import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import { ProtectedRoute } from '@/components/ProtectedRoute';
import { Dashboard } from '@/pages/Dashboard';
import { ColorPickerPage } from '@/pages/ColorPickerPage';
import { RecommendationsPage } from '@/pages/RecommendationsPage';
import { HistoryPage } from '@/pages/HistoryPage';
import { AnalyticsPage } from '@/pages/AnalyticsPage';
import { SettingsPage } from '@/pages/SettingsPage';
import { LoginPage } from '@/pages/LoginPage';
import { RegisterPage } from '@/pages/RegisterPage';
import { NotFoundPage } from '@/pages/NotFoundPage';

export const AppRoutes: React.FC = () => {
  return (
    <Routes>
      {/* 公开路由 */}
      <Route path="/" element={<Dashboard />} />
      <Route path="/login" element={<LoginPage />} />
      <Route path="/register" element={<RegisterPage />} />
      
      {/* 需要认证的路由 */}
      <Route
        path="/color-picker"
        element={
          <ProtectedRoute requiresAuth={true}>
            <ColorPickerPage />
          </ProtectedRoute>
        }
      />
      
      <Route
        path="/recommendations"
        element={
          <ProtectedRoute requiresAuth={true}>
            <RecommendationsPage />
          </ProtectedRoute>
        }
      />
      
      <Route
        path="/history"
        element={
          <ProtectedRoute requiresAuth={true}>
            <HistoryPage />
          </ProtectedRoute>
        }
      />
      
      <Route
        path="/analytics"
        element={
          <ProtectedRoute requiresAuth={true}>
            <AnalyticsPage />
          </ProtectedRoute>
        }
      />
      
      <Route
        path="/settings"
        element={
          <ProtectedRoute requiresAuth={true}>
            <SettingsPage />
          </ProtectedRoute>
        }
      />

      {/* 错误页面 */}
      <Route path="/unauthorized" element={<UnauthorizedPage />} />
      <Route path="/404" element={<NotFoundPage />} />
      
      {/* 重定向和404 */}
      <Route path="*" element={<Navigate to="/404" replace />} />
    </Routes>
  );
};

// 简单的未授权页面
const UnauthorizedPage: React.FC = () => {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="text-center">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">403</h1>
        <p className="text-xl text-gray-600 mb-8">您没有权限访问此页面</p>
        <a
          href="/"
          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
        >
          返回首页
        </a>
      </div>
    </div>
  );
};